<template>
  <div class="sales">
    <el-card>
      <CommonCard title="今日销售额" :value="numberFormat(salesToday)">
        <!-- 类型错误，注意看ts的类型限定，还有公共插槽中的type类型的限定 -->
        <!-- 插槽,将预先写好的组件结构传入插槽中 -->

        <div class="isDay">
          日同比 <span class="isBorder">{{ salesGrowthLastDay }}%<span class="decrement"></span></span>
        </div>

        <div class="isMonth">
          月同比<span class="isBorder"> {{ salesGrowthLastMonth }}%<span class="increment"></span></span>
        </div>

        <template #footer
          >昨日销售额<span class="bro">¥ {{ numberFormat(salesLastDay) }}</span></template
        >
      </CommonCard>
    </el-card>
  </div>
</template>

<script lang="ts">
import CommonCard from "./CommonCard.vue"
export default {
  name: "todaySales",
  components: {
    CommonCard,
  },
}
</script>
<script lang="ts" setup>
import { useReportData } from "@/stores/reportData" // 引入小菠萝获取数据

import { computed } from "@vue/runtime-core"
import useFormat from "@/hooks/useFormat"
// 对格式化数据的函数进行解构
const { numberFormat, moneyFormat } = useFormat()
// 这个页面完成后,发现第一控制台警告,显示说期望得到一个string,但是是number,这是公共组件插槽中定义props的type类型推断的,先不管
// 第二,发现页面中的数据与预期出入,预期要一个英文类型的数据,就是某位开始,每隔3个数字加一个逗号,我们可以在hook中定义一个函数,来对数据进行处理

// 创建pinia实例
const reportDataStore = useReportData()
// 数据已经在home组件挂载完毕发送好了,数据已经存在了pinia中,我们直接去获取就行
// 今日销售额
const salesToday = computed(() => reportDataStore.reportData.salesToday)
// 2. 昨天销售额
const salesLastDay = computed(() => reportDataStore.reportData.salesLastDay)
// 3. 昨天增长量
const salesGrowthLastDay = computed(() => reportDataStore.reportData.salesGrowthLastDay)
// 4. 上月增长量
const salesGrowthLastMonth = computed(() => reportDataStore.reportData.salesGrowthLastMonth)
</script>

<style lang="scss" scoped>
.sales {
  .isDay {
    display: flex;
    font-size: 12px;
  }
  .isMonth {
    display: flex;
    font-size: 12px;
  }

  .isBorder {
    margin-left: 5px;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  .decrement {
    width: 0;
    height: 0;
    border-width: 5px;
    border-color: red transparent transparent transparent;
    border-style: solid;
  }
  .increment {
    width: 0;
    height: 0;
    border-width: 5px;
    border-color: transparent transparent green transparent;
    border-style: solid;
  }
}
</style>
